<template>
  <view class="formPage">
    <mineNavbar :styleData="styleData"></mineNavbar>

    <view class="form">
      <image class="image" v-if="true" :src="bgcImg" mode="aspectFit|aspectFill|widthFix" lazy-load="false" binderror=""
        bindload="" />

      <view class="form-item">
        <view class="item">
          <view class="label">
            <view class="icon"></view>
            <view class="name">姓名</view>
          </view>

          <input class="input" type="text" v-model="form.applicant" placeholder="请填写您的姓名" />
        </view>

        <view class="item">
          <view class="label">
            <view class="icon"></view>
            <view class="name">联系电话</view>
          </view>

          <input class="input" type="text" v-model="form.phone" placeholder="请输入您的联系电话" />
        </view>

        <view class="item">
          <view class="label">
            <view class="icon"></view>
            <view class="name">企业名称</view>
          </view>

          <input class="input" type="text" v-model="form.enterpriseName" placeholder="请填写企业名称" />
        </view>

        <view class="btn" @click="submit"> 提交申请 </view>
      </view>
    </view>
  </view>
</template>

<script>
import { verifyName, verifyMobile, verifyFullName } from "@/utils/toast";

import { applyCooperationAPI } from "@/api/subPage/home";
export default {
  components: {},
  data() {
    return {
      styleData: {
        show: true,
        tabbarText: "岗位外包",
      },

      bgcImg: 'http://wangxinbao.oss-cn-beijing.aliyuncs.com/2024/06/06/a8895250b69145a28ec74ec48937228b.png',

      form: {
        applicant: "",
        enterpriseName: "",
        phone: "",
        type: "1",
      },
    };
  },
  computed: {},
  // 监控data中的数据变化
  watch: {},
  onLoad({ name }) {
    switch (name) {
      case "hour":
        this.styleData.tabbarText = "小时工";
        this.bgcImg = 'http://wangxinbao.oss-cn-beijing.aliyuncs.com/2024/06/06/47c8f2a53eef441189fc62fd11ca8192.png';
        this.form.type = "4";
        break;
      case "invite":
        this.styleData.tabbarText = "招聘外包";
        this.bgcImg ='http://wangxinbao.oss-cn-beijing.aliyuncs.com/2024/06/06/0081895973204fd69c701c7ab151d832.png';
        this.form.type = "2";
        break;

      case "architecture":
        this.styleData.tabbarText = "建筑劳务";
        this.bgcImg ='http://wangxinbao.oss-cn-beijing.aliyuncs.com/2024/06/06/fd9af6733ceb43479d544113682cf48c.png';
        this.form.type = "3";
        break;
    }
  },
  onShow() { },
  onReady() { },
  methods: {
    async submit() {
      if (!verifyName(this.form.applicant)) return;
      if (!verifyMobile(this.form.phone)) return;
      if (!verifyFullName(this.form.enterpriseName)) return;
      const { code } = await applyCooperationAPI(this.form);
      if (code === 200) {
        uni.showToast({
          title: "提交成功",
          icon: "success",
          duration: 1600,
        });
      }
      this.reset();
    },

    reset() {
      // 恢复默认状态
      this.form = {
        applicant: "",
        enterpriseName: "",
        phone: "",
        type: "1",
      };
    },
  },
};
</script>
<style lang="scss" scoped>
.formPage {
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;

  .form {
    .image {
      width: 100%;
      height: 818rpx;
      position: relative;
    }

    .form-item {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translateX(-50%);
      width: 686rpx;

      background: #ffffff;
      border-radius: 32rpx;

      .item {
        margin: 0 40rpx;
        height: 137rpx;
        border-bottom: 1rpx solid #f7f7f7;
        margin-top: 52rpx;

        .label {
          display: flex;
          align-items: center;

          .icon {
            width: 8rpx;
            height: 8rpx;
            background: #cd000a;
            border-radius: 50%;
          }

          .name {
            font-family: PingFangSC-Medium;
            font-weight: 500;
            font-size: 28rpx;
            color: #00000073;
            letter-spacing: 0;
            margin-left: 8rpx;
          }
        }

        .input {
          height: 96rpx;
          margin: 0 16rpx;
        }
      }

      .btn {
        width: 420rpx;
        height: 88rpx;
        line-height: 88rpx;
        background: #ff9e24;
        border-radius: 44rpx;
        margin: 60rpx auto;

        font-weight: 500;
        font-size: 32rpx;
        color: #ffffff;
        letter-spacing: 0;
        text-align: center;
      }
    }
  }
}
</style>
